<template>
  <div>
    <el-dialog @opened="opendialogs" title="添加商品" :visible.sync="obj.isshow">
    <el-form :model="form">
        <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select @change="selectsecondcate" v-model="form.first_cateid" placeholder="请选择一级分类">
            <el-option v-for="items in cateArr" :key="items.id" :label="items.catename" :value="items.id"></el-option>
        </el-select>        
        </el-form-item>
        <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select v-model="form.second_cateid" placeholder="请选择二级分类">
            <el-option v-for="item in secondCateArr" :key="item.id" :label="item.catename" :value="item.id"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
           <div id="cureditor"></div>
        </el-form-item>        
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="obj.isshow = false">取 消</el-button>
        <el-button type="primary" @click="addgoods">添加</el-button>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllGoodsCate } from "../../../request/api.js";
//引入富文本编辑器组件：
import E from "wangeditor";

export default {
    props:['obj'],
  data(){
    return {
        cateArr:[],//所有商品类别数据
        secondCateArr:[],//二级类别数据
        editor:'',//富文本编辑器
        form: {
          first_cateid: '',  //一级分类id
          second_cateid: '', //二级分类id
        },
        formLabelWidth: '120px'        
    }
  },
  mounted(){
    this.getAllCategory();
  },
  methods:{
    //添加一个商品：
    addgoods(){

        //给富文本编辑器设置初始的数据：
        this.editor.txt.html('<div>你好，<strong>WEB!</strong></div><p>这是一段内容</p>')
        //获取富文本编辑器的数据：
        console.log( this.editor.txt.html(),888);
    },
    //对话框打开动画结束时的回调方法：
    opendialogs(){
      //创建编辑器对象
      this.editor = new E("#cureditor");
      this.editor.create();
    },
    //根据用户选择的一级类别查找对应的二级类别：
    selectsecondcate(){
        //用户选择的一级类别id:
      let firstCateId = this.form.first_cateid;
      //根据用户选择的一级类别id查找对应的二级类别数据：
      this.secondCateArr = this.cateArr.find(obj=> obj.id==firstCateId).children?this.cateArr.find(obj=> obj.id==firstCateId).children:[]

    },
    //查询所有商品类别数据：
    getAllCategory(){
        getAllGoodsCate().then(d=>{
           if(d.data.code == 200){
            this.cateArr = d.data.list;
           }
        }).catch(e=>{})
    }
  }
}
</script>

<style>

</style>